<template>
    <div class="commonLineChart">
<!--        <div class="commonLineChart-info" style="width: 354.5px">-->
<!--            <span class="commonLineChart-info-itemP" >-->
<!--                <p style="transform: scale(0.8);">最大值：{{ infoObj.max }} 最小值：{{ infoObj.min }} 平均值：{{infoObj.average }} 方差：{{ infoObj.variance }}</p>-->
<!--            </span>-->
<!--&lt;!&ndash;            <p class="commonLineChart-info-itemP" style="transform: scale(0.65);">&ndash;&gt;-->
<!--&lt;!&ndash;                最小值：{{ infoObj.min }}&ndash;&gt;-->
<!--&lt;!&ndash;            </p>&ndash;&gt;-->
<!--&lt;!&ndash;            <p class="commonLineChart-info-itemP" style="transform: scale(0.65);">&ndash;&gt;-->
<!--&lt;!&ndash;                平均值：{{infoObj.average }}&ndash;&gt;-->
<!--&lt;!&ndash;            </p>&ndash;&gt;-->
<!--&lt;!&ndash;            <p class="commonLineChart-info-itemP" style="transform: scale(0.65);">&ndash;&gt;-->
<!--&lt;!&ndash;                方差：{{ infoObj.variance }}&ndash;&gt;-->
<!--&lt;!&ndash;            </p>&ndash;&gt;-->
<!--            <el-select-->
<!--                    v-model="selValue"-->
<!--                    placeholder="其他测点"-->
<!--                    size="small"-->
<!--                    class="fR"-->
<!--                    :popper-append-to-body="false"-->
<!--                    @change="changeBridgePoint"-->
<!--            >-->
<!--                <el-option-->
<!--                        v-for="item in selOptions"-->
<!--                        :key="item.id"-->
<!--                        :label="item.code"-->
<!--                        :value="item.id"-->
<!--                >-->
<!--                </el-option>-->
<!--            </el-select>-->
<!--        </div>-->
<!--        <div class="commonLineChart-btnGroup">-->
<!--            <el-button type="primary" size="small" plain class="fL mR alarm"-->
<!--            >告警状态</el-button-->
<!--            >-->
<!--            <el-button type="primary" size="small" plain class="fL mR threshold"-->
<!--            >阀值</el-button-->
<!--            >-->
<!--        </div>-->

        <div class="loading loadingClassY" v-show="loadingFlag">
            <van-loading type="spinner" vertical>加载中...</van-loading>
        </div>
<!--        <div class="loading loadingClassY" v-if="!loadingFlag && abnormal">-->
<!--            <span>网络异常！！！</span>-->
<!--        </div>-->
        <div class="commonLineChart-chart" ref="lineChart" id="echarts" v-show="!loadingFlag"></div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import requistApi from "@/api";
    import commonFn from "@/utils/commonFn";

    export default {
        data () {
            return {
                seriesName: '阀值',
                selValue: '',
                line: '',
                // 选中测点下的传感器ID和code值
                paramsSensor:{
                    sensorId: '',
                    sensorCode: ''
                }
            };
        },
        props: {
            loadingFlag: {
                type: Boolean,
                required: false,
                default: false
            },
            abnormal: {
                type: Boolean,
                required: false,
                default: false
            },
            title: {
                type: String,
                required: false,
                default: ''
            },
            seriesData: {
                type: Array,
                required: true,
                default: []
            },
            xAxisData: {
                type: Array,
                required: true,
                default: []
            },
            infoObj: {
                type: Object,
                required: true,
                default: {}
            },
            // 选择桥梁测点
            selOptions: {
                type: Array,
                required: true,
                default: []
            },

        },
        mounted () {
            this.$nextTick(() => {
                this.drawLine();
                window.addEventListener("resize", () => {
                    this.line.resize();
                });
            });
        },
        watch: {
            'xAxisData' : function () {
                this.drawLine();
            }
        },
        methods: {
            drawLine() {
                this.line = new echarts.init(this.$refs.lineChart);
                this.line.setOption({
                    title: {
                        text: this.title,
                        left: "center",
                        top: "12%",
                        textStyle: {
                            color: "#327BDC",
                            fontSize: 12
                        }
                    },
                    grid: {
                        top: '15%',
                        right: '3%',
                        left: '10%',
                        bottom: '15%'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: [{
                        type: 'category',
                        data: this.xAxisData,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#E5E6EB"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#E5E6EB"
                            }
                        },
                        boundaryGap: false,
                        axisLabel: {
                            color: "#A7A6AF",
                            fontSize: 8
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        splitNumber: 4,
                        splitLine: {
                            show: false
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: ['#F5F6FA', '#fff']
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#E5E6EB"
                            },
                        },
                        axisLabel: {
                            color: "#A7A6AF",
                            fontSize: 8
                        }
                    }],
                    series: [{
                        name: this.seriesName,
                        data: this.seriesData,
                        type: 'line',
                        symbol: 'emptyCircle',
                        symbolSize: 8,
                        lineStyle: {
                            color: '#699EE5',
                            shadowBlur: 12,
                            shadowColor: 'rgb(33,148,246,0.5)',
                            shadowOffsetX: 1,
                            shadowOffsetY: 1
                        },
                        itemStyle: {
                            color: '#699EE5',
                            borderWidth: 1
                        }
                    }]
                }, true);
            },
            // 清除Echarts的实例
            clearEcharts() {
                // echarts.init(document.getElementById('echarts')).dispose();//销毁前一个实例
                // echarts.init(this.$refs.lineChart).dispose();//销毁前一个实例
            },
            // 父组件调用子组件的事件——重新渲染数据
            incomingEvent () {
                console.log('重新渲染出来问题')
                // this.drawLine();
                // var t8 = window.setTimeout(function(){
                //     console.log('jjjjj')
                //     window.clearTimeout(t8);//去掉定时器
                // },500)
                // window.addEventListener("resize", () => {
                //     this.line.resize();
                // });

            },
            // 点击事件改变东西
            changeBridgePoint(id) {
                // 获取到点击得到的测点下的传感器数据
                this.getSensorListData(id)
            },
            // 获取测点下传感器的数据
            getSensorListData(sensorID) {
                requistApi.monitoring
                    .getSensorData(sensorID, this.getParams())
                    .then((res) => {
                        if (
                            res.data.data !== undefined &&
                            JSON.stringify(res.data.data) !== "{}"
                        ) {
                            this.paramsSensor.sensorCode = res.data.data[0][0].code
                            this.paramsSensor.sensorId = res.data.data[0][0].id
                            // 把改变的测点数据ID传入到父组件中，让图标显示改变后的样子
                            this.$emit('clickHeadAction',this.paramsSensor);
                        }
                    }).catch(err => {
                    console.log(err)
                });
            },
            // 获取原生通过链接传过来的参数
            getParams() {
                let token = commonFn.getQueryVariable("token") || "";
                let appkey = commonFn.getQueryVariable("app-key") || "FB";
                return { token, appkey };
            }
        },
        components: {},
    };
</script>

<style lang="scss" scoped>
    .commonLineChart {
        width: 100%;
        height: 100%;
        position: relative;
        &-info {
            /*position: absolute;*/
            display: flex;
            top: 0;
            left: 0;
            font-size: 12px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            z-index: 999;
            cursor: default;
            &-itemP{
                display: inline-block;
            }
        }
        &-btnGroup {
            width: 100%;
            overflow: hidden;
            position: absolute;
            top: 15%;
            left: 0;
            z-index: 999;
        }
        &-chart {
            width: 100%;
            height: 100%;

        }
        .fR {
            float: right;
            right: 20px;
            top: 5px;
            height: 15px;
            /*height: 8px;*/
            /*width: 94px;*/
            ::v-deep input{
                font-size: 6px;
                height: 100%;
                -webkit-transform: scale(0.3);
                transform: scale(0.3);
            }
            &>div{
                height: 100%;
                &>::v-deep span{
                    transform: scale(0.6);
                    padding: 6px;
                    &>span{
                        ::v-deep .is-reverse{
                            transform: none;
                            color: green;
                        }
                    }
                }
            }
        }
        .fL {
            float: right;
        }
        .mR {
            margin-right: 10px;
        }
        .threshold{
            height: 15px;
            border: 1px solid #5B6095;
        }
        .alarm{
            height: 15px;
            border: 1px solid #5B6095;
            right: 20px;
            margin-right: 18px;
        }
    }
    .el-input--small .el-input__inner {
        height: 0.4333rem;
        line-height: 0.4333rem;
    }
    ::v-deep .el-input__icon {
        height: auto;
    }
    ::v-deep .el-input--small .el-input__icon {
        line-height: 0.4333rem;
    }
    ::v-deep .el-button {
        line-height: 0;
    }
    .loadingClassY{
        position: absolute;
        margin: 75px 0 0 150px;
    }
</style>
